<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>业务介绍</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>


        .index-search-wrap {
            padding: 0 .32rem;
            background: rgba(255, 255, 255, 1);
            border-bottom: solid 1px #f6f6f6;
        }

        .index-search-box {
            margin-bottom: .12rem;
            margin-top: .12rem;
        }

        .index-search-img {
            width: 7.5rem;
            height: 3rem;
        }

        .index-search-img img {
            width: 100%;
            height: 100%;
        }

        .index-search-search {
            height: .64rem;
            line-height: .64rem;
            width: 6.08rem;
            border-radius: .08rem;
            background: rgba(245, 245, 245, 1);
        }

        .index-search-icon {
            margin-left: .24rem;
            color: rgba(159, 159, 159, 1);
        }

        .index-search-sc {
            color: rgba(159, 159, 159, 1);
            height: .64rem;
            width: .92rem;
            line-height: .64rem;
            margin: auto;
            text-align: center;
        }


        .index-search-search i {
            margin-right: .26rem;
        }

        .index-search-search input {
            margin-left: .14rem;
            line-height: .6rem;
        }

        input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

        .index-search-cancle {
            color: rgba(44, 104, 255, 1);
        }



        .calculator-index-search span {
            color: rgba(159,159,159,1);
            margin-left: .24rem;
        }

        .calculator-index-search i {
            margin-right: .26rem;
        }

        .calculator-index-search span {
            margin-left: .24rem;
        }

        .search-history-wrap {
            background: rgba(255, 255, 255, 1);
            margin-top: .4rem;
        }

        .search-history-head {
            margin-bottom: .14rem;
            padding: 0 .32rem;
        }

        .search-history-head div {
            height: .4rem;
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
        }

        .search-history-head span {
            color:rgba(34,34,34,0.38);
        }

        .search-history-item {
            flex-wrap: wrap;
            display: flex;
            overflow: hidden;
            padding: 0 .18rem;
            max-height: 3.36rem;
        }

        .search-history-word {
            line-height: .44rem;
            background: rgba(247, 247, 247, 1);
            border-radius: .04rem;
            color: rgba(34, 34, 34, 1);
            margin: .1rem .14rem;
            padding: .1rem .2rem;
            max-width: 6.1rem;
        }

        .search-hot-wrap {
            background: rgba(255, 255, 255, 1);
            margin-top: .4rem;
        }
        .search-hot-head {
            margin-bottom: .14rem;
            padding: 0 .32rem;
        }
        .search-hot-item {
            flex-wrap: wrap;
            display: flex;
            overflow: hidden;
            padding: 0 .18rem;
        }
        .search-hot-title {
            height: .4rem;
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
        }
        .search-hot-icon {
            margin-left: .12rem;
            color: #EC3E33;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column bg-white h-100-p">

    <!--状态栏-->
    <div class="bg-main status-bar"></div>

    <!--搜索框-->
    <div class="index-search-wrap"></div>

    <div class="flex-column flex-1 scroll-y">

        <div class="search-history-wrap dis-n">
            <div class="flex-row justify-content-between align-items-center search-history-head">
                <div class="ff500 fs14">搜索历史</div>
                <span class="iconfont iconlajitong_icon fs16" onclick="cacheClean()"></span>
            </div>
            <div class="search-history-item"></div>
        </div>

        <div class="search-hot-wrap">
            <div class="flex-row align-items-center search-hot-head">
                <div class="ff500 fs14 search-hot-title">热门搜索</div>
                <span class="search-hot-icon iconfont iconremen fs16"></span>
            </div>
            <div class="search-hot-item"></div>
        </div>
    </div>

</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<script src="../../js/template.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  let pm = {
    keyWord: ''
  }
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    Template.searchArea('index-search-wrap')
    $('#keyWord').val(pm.keyWord)

    reLoadPage()

  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {
    //如果是删除返回，则清除输入信息
    if (params.isDelete) {
      $('#keyWord').val('')
    }
    //返回时，重新聚焦
    document.getElementById('keyWord').focus()

    reLoadPage()
  }

  function reLoadPage() {

    //返回时，重新聚焦
    document.getElementById('keyWord').focus()

    $('.search-history-item').html('')

    //处理搜索历史
    dealSearchWord()

    //获取搜索热词
    getHotWord()
  }

  //处理搜索历史
  function dealSearchWord() {
    jsBridge.getData('compSearchData').then(list => {
      $('.search-history-item').html('')
      if (list) {
        $('.search-history-wrap').show()

        $.each(list, function (i, item) {
          let htmlStr = ''
          htmlStr += '<div class="search-history-word hw' + i + ' ff400 fs13 line1" onclick="goSearch(\'' + item + '\')"></div>'
          $('.search-history-item').append(htmlStr)
          $('.hw' + i).text(item).html()
        })
      }
    })
  }

  //清除缓存
  function cacheClean() {
    $('.search-history-item').html('')
    jsBridge.delData('compSearchData')
    $('.search-history-wrap').hide()
  }

  function goSearch(key) {
    key = key ? encodeURIComponent(Utils.replaceAll(key, '%', '%25')) : ''
    jsBridge.openWindow('html/search/search.html',{key: key}, {noBar: false})
  }

  //获取搜索热词
  function getHotWord() {
    Server.indexSearch.getHotWord({
    }).then(function (data) {
      //data.list = { list : [{word:'大宗商品'}, {word:'大宗商品'}, {word:'大宗商品'}]}
      if (data.list) {
        let htmlStr = ''
        $.each(data.list, function (i, item) {
          if (i < 20) {
            htmlStr += '<div class="search-history-word ff400 fs13 line1" onclick="goSearch(\'' + item.word + '\')">' + item.word  + '</div>'
          }
        })

        $('.search-hot-item').html(htmlStr)
      }
    })
  }

</script>
</html>
